<template>
  <div class="login">
    <div class="logo sp-whitespace">
    </div>
    <div class="login-content">
      <div class="login-wei">
        <div id="qrcode" class="qrcode"></div>
         <div id="invitationText">{{$route.query.addr}}</div>
          <div id="copy" class="btn" data-clipboard-target="#invitationText" @click="onClipboard">复制钱包地址</div>
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2';
import Clipboard from 'clipboard';
import { Toast } from 'vant';
export default {
  name : 'test',
  mounted () {
    this.qrcode();
  },
  methods: {
    qrcode() {
      let qrcode = new QRCode('qrcode', {
        width: 132,  
        height: 132,
        text: this.$route.query.addr, // 二维码地址
        colorDark : "#000",
        colorLight : "#fff",
      })
    },
    onClipboard () {
      let clipboard = new Clipboard('#copy')
      clipboard.on('success', (e) => {
          Toast.success('钱包地址复制成功');
          e.clearSelection() 
        })
      clipboard.on('error', () => {})
    },
  }
}
</script>
<style lang="scss" scoped type="text/scss">

.login {
  position: relative;
  width: 100%;
  height: 100vh;
  background-size: 120% 120%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../assets/login-bg.png");
  .login-content {
      height: 100vh;
      background: rgba(255, 255, 255, 0.8);
      border: 1px solid #ffffff;
      box-shadow: 0 5px 20px 0 rgba(11, 84, 151, 0.15);
      border-radius: 0 0 5px 5px;
  }
  .login-wei {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
  }
}
.qrcode {
        margin: 10px auto;
        img {
          width: 132px;
          height: 132px;
          margin: auto;
          background-color: #fff; //设置白色背景色
          padding: 6px; // 利用padding的特性，挤出白边
        }
      }
      .btn {
        width: 1.2rem;
        height: .4rem;
        line-height: .4rem;
        text-align: center;
        color: #fff;
        margin: 10px auto;
        background: #01D25B;
        box-shadow: 0 5px 15px 0 rgba(15,222,122,0.50);
        border-radius: 5px;
        &:active {
          box-shadow: -1px 0px 1px 0 rgba(0, 0, 0, 0.15),
            inset 0 -1px 0 0 #dde6dd;
        }
      }
</style>
